<!DOCTYPE html>
<html lang="zh-CN">
    <head>
    <meta charset="utf-8">

    

    <!-- 渲染优化 -->
    <meta name="renderer" content="webkit">
    <meta name="force-rendering" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="HandheldFriendly" content="True" >
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!--icon-->

    
        <link rel="shortcut icon" href="https://s1.imgpp.com/2022/01/28/owl.png">
    
    
    
    
    


    <!-- meta -->


<title>Vue2+ElementUI后台管理系统 | 猫头鹰的BLOG</title>


    <meta name="keywords" content="vue2, elementUI, 猫头鹰的博客">




    <!-- OpenGraph -->
 
    <meta name="description" content="前言我做这个项目主要是为了熟练掌握vue框架的使用和组件的封装，后台管理系统顾名思义就是管理页面数据，控制页面显示。下面就是我对该项目的一些经验分享和总结 技术归纳 核心技术   vue2:js框架(主流),如果不熟悉vue，可以参考下我的学习笔记 elementUI(也是主流)   其他技术栈   axios:网络请求库，发起一个异步请求，用于取接口的数据 mock：虚拟接口数据，用于生成虚拟数">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue2+ElementUI后台管理系统">
<meta property="og:url" content="http://example.com/2022/04/06/%E5%90%8E%E5%8F%B0%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F1.0/index.html">
<meta property="og:site_name" content="猫头鹰的BLOG">
<meta property="og:description" content="前言我做这个项目主要是为了熟练掌握vue框架的使用和组件的封装，后台管理系统顾名思义就是管理页面数据，控制页面显示。下面就是我对该项目的一些经验分享和总结 技术归纳 核心技术   vue2:js框架(主流),如果不熟悉vue，可以参考下我的学习笔记 elementUI(也是主流)   其他技术栈   axios:网络请求库，发起一个异步请求，用于取接口的数据 mock：虚拟接口数据，用于生成虚拟数">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg?cs=srgb&dl=pexels-eberhard-grossgasteiger-572897.jpg&fm=jpg">
<meta property="article:published_time" content="2022-04-06T02:00:20.000Z">
<meta property="article:modified_time" content="2022-04-06T11:05:08.774Z">
<meta property="article:author" content="张程">
<meta property="article:tag" content="vue2">
<meta property="article:tag" content="elementUI">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg?cs=srgb&dl=pexels-eberhard-grossgasteiger-572897.jpg&fm=jpg">


    
<link rel="stylesheet" href="/css/style/main.css">
 

    
    
    
        <link rel="stylesheet" id="hl-default-theme" href="https://cdn.jsdelivr.net/npm/highlight.js@10.1.2/styles/arduino-light.min.css" media="none" >
        
            <link rel="stylesheet" id="hl-dark-theme" href="https://cdn.jsdelivr.net/npm/highlight.js@10.1.2/styles/obsidian.min.css" media="none">
        
    

    

    
    
<link rel="stylesheet" href="/css/style/dark.css">

    
<script src="/js/darkmode.js"></script>



     
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
 

    <!-- custom head -->

<meta name="generator" content="Hexo 6.0.0"></head>

    <body>
        <div id="app">
            <header class="header">
    <div class="header__left">
        <a href="/" class="button">
            <span class="logo__text">猫头鹰</span>
        </a>
    </div>
    <div class="header__right">
        
            <div class="navbar__menus">
                
                    <a href="/" class="navbar-menu button">首页</a>
                
                    <a href="/tags/" class="navbar-menu button">标签</a>
                
                    <a href="/categories/" class="navbar-menu button">分类</a>
                
                    <a href="/archives/" class="navbar-menu button">归档</a>
                
            </div>
        
        
        
    <a href="/search/" id="btn-search">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="32"><path d="M192 448c0-141.152 114.848-256 256-256s256 114.848 256 256-114.848 256-256 256-256-114.848-256-256z m710.624 409.376l-206.88-206.88A318.784 318.784 0 0 0 768 448c0-176.736-143.264-320-320-320S128 271.264 128 448s143.264 320 320 320a318.784 318.784 0 0 0 202.496-72.256l206.88 206.88 45.248-45.248z"></path></svg>
    </a>


        
        
    <a href="javaScript:void(0);" id="btn-toggle-dark">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
    </a>


        
            <a class="dropdown-icon button" id="btn-dropdown" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width='24' height='24' fill="none" stroke="currentColor" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M3.314,4.8h13.372c0.41,0,0.743-0.333,0.743-0.743c0-0.41-0.333-0.743-0.743-0.743H3.314c-0.41,0-0.743,0.333-0.743,0.743C2.571,4.467,2.904,4.8,3.314,4.8z M16.686,15.2H3.314c-0.41,0-0.743,0.333-0.743,0.743s0.333,0.743,0.743,0.743h13.372c0.41,0,0.743-0.333,0.743-0.743S17.096,15.2,16.686,15.2z M16.686,9.257H3.314c-0.41,0-0.743,0.333-0.743,0.743s0.333,0.743,0.743,0.743h13.372c0.41,0,0.743-0.333,0.743-0.743S17.096,9.257,16.686,9.257z"></path></svg></a>
            <div class="dropdown-menus" id="dropdown-menus">
                
                    <a href="/" class="dropdown-menu button">首页</a>
                
                    <a href="/tags/" class="dropdown-menu button">标签</a>
                
                    <a href="/categories/" class="dropdown-menu button">分类</a>
                
                    <a href="/archives/" class="dropdown-menu button">归档</a>
                
            </div>
        
    </div>
</header>


            <main class="main">
    

<div class="post-title">
    <h1 class="post-title__text">
        Vue2+ElementUI后台管理系统
    </h1>
    <div class="post-title__meta">
        <a href="/archives/2022/04/" class="post-meta__date button">2022-04-06</a>
        
    <span class="separate-dot"></span><a href="/categories/vue2/" class="button">vue2</a>

 
        
    
     
    <span id="busuanzi_container_page_pv" hidden>
        <span class="separate-dot"></span>
        <span></span>
        <span id="busuanzi_value_page_pv"></span>
        <span>次观看</span>
    </span>



 

 
    </div>
</div>



<article class="post content-card">
    <div class="post__header">
    
        <div class="post-thumbnail lazy" data-bg="https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg?cs=srgb&amp;dl=pexels-eberhard-grossgasteiger-572897.jpg&amp;fm=jpg"></div>
    
</div>
    <div class="post__content">
        <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>我做这个项目主要是为了熟练掌握vue框架的使用和组件的封装，后台管理系统顾名思义就是管理页面数据，控制页面显示。下面就是我对该项目的一些经验分享和总结</p>
<h2 id="技术归纳"><a href="#技术归纳" class="headerlink" title="技术归纳"></a>技术归纳</h2><blockquote>
<p><strong>核心技术</strong></p>
</blockquote>
<ol>
<li>vue2:js框架(主流),如果不熟悉vue，可以参考下我的<a target="_blank" rel="noopener" href="https://when-i-was-young.gitee.io/2022/03/15/vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">学习笔记</a></li>
<li>elementUI(也是主流)</li>
</ol>
<blockquote>
<p>其他技术栈</p>
</blockquote>
<ol>
<li>axios:网络请求库，发起一个异步请求，用于取接口的数据</li>
<li>mock：虚拟接口数据，用于生成虚拟数据和接口地址</li>
<li>echarts:数据可视化，将数据生成图表</li>
<li>vue-router：路由，异步刷新页面，用于导航</li>
<li>vuex:状态管理，用于数据共享</li>
<li>cookie：储存本地数据，判断用户权限</li>
<li>less:用于编写css样式</li>
</ol>
<h2 id="项目搭建"><a href="#项目搭建" class="headerlink" title="项目搭建"></a>项目搭建</h2><h4 id="项目架构"><a href="#项目架构" class="headerlink" title="项目架构"></a>项目架构</h4><ol>
<li>创建vue框架<blockquote>
<p>建议根据需求搭建项目</p>
</blockquote>
</li>
</ol>
<pre><code class="hljs shell">vue ui</code></pre>

<p><img src="https://imgpp.com/s1/2022/04/06/image89ecca725e64fa76.png" class="lazy" data-srcset="https://imgpp.com/s1/2022/04/06/image89ecca725e64fa76.png" srcset="" alt="效果图"><br>2. 项目依赖</p>
<blockquote>
<p>下载node.js内置npm命令<br>去<a target="_blank" rel="noopener" href="https://www.npmjs.com/">npm官网</a>下载第三方包/库</p>
</blockquote>
<p><img src="https://imgpp.com/s1/2022/04/06/imaged4a28d667aa20c12.png" class="lazy" data-srcset="https://imgpp.com/s1/2022/04/06/imaged4a28d667aa20c12.png" srcset="" alt="效果图"></p>
<h4 id="路由初始化"><a href="#路由初始化" class="headerlink" title="路由初始化"></a>路由初始化</h4><blockquote>
<p>创建src/router/index.js文件<br><img src="https://imgpp.com/s1/2022/04/06/imageb7bbe0b2dc9c22da.png" class="lazy" data-srcset="https://imgpp.com/s1/2022/04/06/imageb7bbe0b2dc9c22da.png" srcset="" alt="效果图"></p>
</blockquote>
<h4 id="vuex初始化"><a href="#vuex初始化" class="headerlink" title="vuex初始化"></a>vuex初始化</h4><blockquote>
<p>创建src/store/index.js</p>
</blockquote>
<p><img src="https://imgpp.com/s1/2022/04/06/image696fd817ef5e1af9.png" class="lazy" data-srcset="https://imgpp.com/s1/2022/04/06/image696fd817ef5e1af9.png" srcset="" alt="效果图"></p>
<h2 id="模块分配"><a href="#模块分配" class="headerlink" title="模块分配"></a>模块分配</h2><ol>
<li>登录页</li>
<li>后台首页</li>
<li>用户管理页</li>
<li>路由守卫</li>
<li>权限管理<br><img src="https://imgpp.com/s1/2022/04/06/imagecaf54c623e1465e3.png" class="lazy" data-srcset="https://imgpp.com/s1/2022/04/06/imagecaf54c623e1465e3.png" srcset="" alt="效果图"><h2 id="页面组件化"><a href="#页面组件化" class="headerlink" title="页面组件化"></a>页面组件化</h2></li>
<li>侧边栏</li>
<li>头部</li>
<li>主体<br><img src="https://imgpp.com/s1/2022/04/06/image061d357885b0cddd.png" class="lazy" data-srcset="https://imgpp.com/s1/2022/04/06/image061d357885b0cddd.png" srcset="" alt="效果图"></li>
</ol>
<h2 id="知识点归纳"><a href="#知识点归纳" class="headerlink" title="知识点归纳"></a>知识点归纳</h2><h4 id="require-“path”"><a href="#require-“path”" class="headerlink" title="require(“path”)"></a>require(“path”)</h4><blockquote>
<p>用于引进资源</p>
</blockquote>
<h4 id="map"><a href="#map" class="headerlink" title="map()"></a>map()</h4><blockquote>
<p>数组的api，将数组对象提取为一个数组</p>
</blockquote>
<pre><code class="hljs javascript"><span class="hljs-keyword">const</span> arrObj=[
	&#123;
	<span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;张三&#x27;</span>,
	<span class="hljs-attr">age</span>:<span class="hljs-number">18</span>
	&#125;,
	&#123;
	<span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;李四&#x27;</span>,
	<span class="hljs-attr">age</span>:<span class="hljs-number">20</span>
	&#125;
]
<span class="hljs-keyword">const</span> arr=arrObj.map(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span>&#123;
	<span class="hljs-keyword">return</span> item.name
&#125;)
<span class="hljs-comment">// arr=[&#x27;张三&#x27;,&#x27;李四&#x27;]</span></code></pre>

<h4 id="props的使用"><a href="#props的使用" class="headerlink" title="props的使用"></a>props的使用</h4><blockquote>
<p>父组件自定义子组件</p>
</blockquote>
<pre><code class="hljs vue">// 封装子组件
&lt;template&gt;
	&lt;el-form :model=&quot;from&quot;&gt;
	&lt;/el-form&gt;
&lt;/template&gt;
export default &#123;
	props:&#123;
      from:Object,
      inline:Boolean
	&#125;
&#125;</code></pre>

<pre><code class="hljs vue">// 在父组件中定义子组件
&lt;template&gt;
	&lt;子组件
	  :from=&quot;from&quot;
	&gt;
	&lt;/子组件&gt;
&lt;/template&gt;
export default &#123;
	data()&#123;
		return&#123;
			from:&#123;
				name:&quot;xxx&quot;,
				age:&quot;xxx&quot;,
				weight:&quot;xxx&quot;
			&#125;
		&#125;
	&#125;
&#125;</code></pre>

<h4 id="route-path"><a href="#route-path" class="headerlink" title="$route.path"></a>$route.path</h4><blockquote>
<p>当前路由</p>
</blockquote>
<h4 id="router-params"><a href="#router-params" class="headerlink" title="$router.params"></a>$router.params</h4><blockquote>
<p>路由参数</p>
</blockquote>
<h4 id="路由守卫"><a href="#路由守卫" class="headerlink" title="路由守卫"></a>路由守卫</h4><blockquote>
<p>原理：根据用户是否有token决定放不放行</p>
</blockquote>
<pre><code class="hljs javascript">router.beforeEach(<span class="hljs-function">(<span class="hljs-params">to, <span class="hljs-keyword">from</span>, next</span>) =&gt;</span> &#123;
  <span class="hljs-comment">// 防止页面刷新丢掉token</span>
  store.commit(<span class="hljs-string">&quot;getToken&quot;</span>);
  <span class="hljs-keyword">const</span> token = store.state.token;
  <span class="hljs-keyword">if</span> (!token &amp;&amp; to.name !== <span class="hljs-string">&quot;login&quot;</span>) &#123;
    next(&#123; <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;login&quot;</span> &#125;);
  &#125;  <span class="hljs-keyword">else</span> &#123;
    next();
&#125;
&#125;);
<span class="hljs-keyword">new</span> Vue(&#123;
  <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">h</span>) =&gt;</span> h(App),
  router,
  store,
  <span class="hljs-function"><span class="hljs-title">created</span>(<span class="hljs-params"></span>)</span> &#123;
    store.commit(<span class="hljs-string">&quot;addMenu&quot;</span>, router);
  &#125;,
&#125;).$mount(<span class="hljs-string">&quot;#app&quot;</span>);</code></pre>

<blockquote>
<p>在store/index.js的mutations函数中定义添加路由配置函数</p>
</blockquote>
<pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-title">addMenu</span>(<span class="hljs-params">state</span>)</span> &#123;
    <span class="hljs-keyword">if</span> (!Cookie.get(<span class="hljs-string">&#x27;menu&#x27;</span>)) &#123;
        <span class="hljs-keyword">return</span>
    &#125;
    <span class="hljs-keyword">const</span> menu = <span class="hljs-built_in">JSON</span>.parse(Cookie.get(<span class="hljs-string">&quot;menu&quot;</span>))
    state.menu = menu
    <span class="hljs-keyword">const</span> menuArray=[]
    menu.forEach(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> &#123;
        <span class="hljs-keyword">if</span> (item.children) &#123;
            item.children = item.children.map(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> &#123;
                item.component = <span class="hljs-function">() =&gt;</span> <span class="hljs-keyword">import</span>(<span class="hljs-string">`../views/<span class="hljs-subst">$&#123;item.url&#125;</span>`</span>)
                <span class="hljs-keyword">return</span> item
            &#125;)
            menuArray.push(...item.children)
        &#125; <span class="hljs-keyword">else</span> &#123;
            item.component = <span class="hljs-function">() =&gt;</span> <span class="hljs-keyword">import</span>(<span class="hljs-string">`../views/<span class="hljs-subst">$&#123;item.url&#125;</span>`</span>)
            menuArray.push(item)
        &#125;
    &#125;)
    <span class="hljs-comment">// 动态路由添加</span>
    menuArray.forEach(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> &#123;
        router.addRoute(<span class="hljs-string">&#x27;main&#x27;</span>,item)
    &#125;)
&#125;</code></pre>

<blockquote>
<p>在登录视图的提交事件定义api</p>
</blockquote>
<pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-title">login</span>(<span class="hljs-params"></span>)</span>&#123;
  getMenu2(<span class="hljs-built_in">this</span>.form).then(<span class="hljs-function">(<span class="hljs-params">&#123;data:res&#125;</span>)=&gt;</span>&#123;
    <span class="hljs-keyword">if</span>(res.code===<span class="hljs-number">20000</span>)&#123;
      <span class="hljs-built_in">this</span>.$store.commit(<span class="hljs-string">&quot;clearMenu&quot;</span>)
      <span class="hljs-built_in">this</span>.$store.commit(<span class="hljs-string">&quot;setMenu&quot;</span>,res.data.menu)
      <span class="hljs-built_in">this</span>.$store.commit(<span class="hljs-string">&quot;setToken&quot;</span>,res.data.token)
      <span class="hljs-built_in">this</span>.$store.commit(<span class="hljs-string">&quot;addMenu&quot;</span>,<span class="hljs-built_in">this</span>.$router)
      <span class="hljs-built_in">this</span>.$router.push(&#123;<span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;home&#x27;</span>&#125;)
    &#125;<span class="hljs-keyword">else</span>&#123;
      <span class="hljs-built_in">this</span>.$message.warning(res.data.message)
    &#125;
  &#125;)
&#125;</code></pre>

<h4 id="axios的二次封装模板"><a href="#axios的二次封装模板" class="headerlink" title="axios的二次封装模板"></a>axios的二次封装模板</h4><blockquote>
<p>src同级创建api和config文件夹,分别创建axios.js和index.js文件</p>
</blockquote>
<blockquote>
<p>axios的配置</p>
</blockquote>
<pre><code class="hljs javascript">
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> &#123;
    <span class="hljs-attr">baseUrl</span>: &#123;
        <span class="hljs-attr">dev</span>: <span class="hljs-string">&#x27;/api/&#x27;</span>,
        <span class="hljs-attr">pro</span>:<span class="hljs-string">&#x27;&#x27;</span>
    &#125;
&#125;</code></pre>

<blockquote>
<p>二次封装的axios</p>
</blockquote>
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> axios <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;axios&quot;</span>;
<span class="hljs-keyword">import</span> config <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../config&quot;</span>;


<span class="hljs-keyword">const</span> baseUrl =
  process.env.NODE_ENV === <span class="hljs-string">&quot;development&quot;</span>
    ? config.baseUrl.dev
    : config.baseUrl.pro;

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HttpRequest</span> </span>&#123;
  <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">baseUrl</span>)</span> &#123;
    <span class="hljs-built_in">this</span>.baseUrl = baseUrl;
  &#125;
  <span class="hljs-function"><span class="hljs-title">getInsideConfig</span>(<span class="hljs-params"></span>)</span> &#123;
    <span class="hljs-keyword">const</span> config = &#123;
      <span class="hljs-attr">baseUrl</span>: <span class="hljs-built_in">this</span>.baseUrl,
      <span class="hljs-attr">header</span>: &#123;&#125;,
    &#125;;
    <span class="hljs-keyword">return</span> config;
  &#125;
  <span class="hljs-function"><span class="hljs-title">interceptors</span>(<span class="hljs-params">instance</span>)</span> &#123;
    <span class="hljs-comment">// Add a request interceptor</span>
    instance.interceptors.request.use(
      <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">config</span>) </span>&#123;
        <span class="hljs-comment">// Do something before request is sent</span>
        <span class="hljs-keyword">return</span> config;
      &#125;,
      <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) </span>&#123;
        <span class="hljs-comment">// Do something with request error</span>
        <span class="hljs-keyword">return</span> <span class="hljs-built_in">Promise</span>.reject(error);
      &#125;
    );

    <span class="hljs-comment">// Add a response interceptor</span>
    instance.interceptors.response.use(
        <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) </span>&#123;
        <span class="hljs-comment">// Do something with response data</span>
        <span class="hljs-keyword">return</span> response;
      &#125;,
        <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) </span>&#123;
          <span class="hljs-built_in">console</span>.log(error);
        <span class="hljs-comment">// Do something with response error</span>
        <span class="hljs-keyword">return</span> <span class="hljs-built_in">Promise</span>.reject(error);
      &#125;
    );
    &#125;
    <span class="hljs-function"><span class="hljs-title">request</span>(<span class="hljs-params">options</span>)</span> &#123;
        <span class="hljs-keyword">const</span> instance = axios.create()
        options = &#123; ...this.getInsideConfig(), ...options &#125;
        <span class="hljs-built_in">this</span>.interceptors(instance)
        <span class="hljs-keyword">return</span> instance(options)
    &#125;
  
&#125;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">new</span> HttpRequest(baseUrl);</code></pre>

<blockquote>
<p>在vue的原型对象上添加封装好的axios，main.js写入</p>
</blockquote>
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> http <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;axios&quot;</span>;
Vue.prototype.$http = http;</code></pre>

<h4 id="mock生成接口和虚拟数据"><a href="#mock生成接口和虚拟数据" class="headerlink" title="mock生成接口和虚拟数据"></a>mock生成接口和虚拟数据</h4><blockquote>
<p>在api下创mock.js(用于生成接口)和data.js(生成网络请求函数)</p>
</blockquote>
<blockquote>
<p>mock.js示例</p>
</blockquote>
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Mock <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;mockjs&quot;</span>
<span class="hljs-keyword">import</span> homeApi <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./mockServeData/home&quot;</span>
<span class="hljs-keyword">import</span> userApi <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./mockServeData/user&quot;</span>
<span class="hljs-keyword">import</span> permissionApi <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./mockServeData/permission&quot;</span>
Mock.mock(<span class="hljs-string">&#x27;/home/getData&#x27;</span>, homeApi.getStatisticalData)
Mock.mock(<span class="hljs-regexp">/user\/add/</span>, <span class="hljs-string">&#x27;post&#x27;</span>, userApi.createUser)
Mock.mock(<span class="hljs-regexp">/user\/edit/</span>, <span class="hljs-string">&#x27;post&#x27;</span>, userApi.updateUser)
Mock.mock(<span class="hljs-regexp">/user\/getUser/</span>, <span class="hljs-string">&#x27;get&#x27;</span>, userApi.getUserList)
Mock.mock(<span class="hljs-regexp">/user\/del/</span>, <span class="hljs-string">&#x27;post&#x27;</span>, userApi.deleteUser)
Mock.mock(<span class="hljs-regexp">/permission\/getMenu2/</span>, <span class="hljs-string">&#x27;get&#x27;</span>, permissionApi.getMenu2)</code></pre>

<blockquote>
<p>data.js示例</p>
</blockquote>
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> axios <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./axios&quot;</span> <span class="hljs-comment">//次axios非彼axios(二次封装的axios)</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> getMenu = <span class="hljs-function">(<span class="hljs-params">param</span>) =&gt;</span> &#123;
    <span class="hljs-keyword">return</span> axios.request(&#123;
        <span class="hljs-attr">url</span>: <span class="hljs-string">&quot;/permission/getMenu&quot;</span>,
        <span class="hljs-attr">methods</span>: <span class="hljs-string">&quot;post&quot;</span>,
        <span class="hljs-attr">data</span>:param
    &#125;)
&#125;</code></pre>
<blockquote>
<p>api下创mockServeData文件夹，每个文件代表这虚拟数据</p>
</blockquote>
<blockquote>
<p>示例</p>
</blockquote>
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Mock <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;mockjs&quot;</span>

<span class="hljs-comment">// 图表数据</span>
<span class="hljs-keyword">let</span> List = []
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> &#123;
    <span class="hljs-attr">getStatisticalData</span>: <span class="hljs-function">() =&gt;</span> &#123;
        <span class="hljs-comment">// Mock.Random.float产生随机数100-8000之间，保留小数，最小0位，最大0位</span>
        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; <span class="hljs-number">7</span>; i++)&#123;
            List.push(
                Mock.mock(&#123;
                    苹果: Mock.Random.float(<span class="hljs-number">100</span>, <span class="hljs-number">8000</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>),
                    <span class="hljs-attr">vivo</span>: Mock.Random.float(<span class="hljs-number">100</span>, <span class="hljs-number">8000</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>),
                    <span class="hljs-attr">oppo</span>: Mock.Random.float(<span class="hljs-number">100</span>, <span class="hljs-number">8000</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>),
                    魅族: Mock.Random.float(<span class="hljs-number">100</span>, <span class="hljs-number">8000</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>),
                    三星: Mock.Random.float(<span class="hljs-number">100</span>, <span class="hljs-number">8000</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>),
                    小米: Mock.Random.float(<span class="hljs-number">100</span>, <span class="hljs-number">8000</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>),
                &#125;)
            )
        &#125;
        <span class="hljs-keyword">return</span> &#123;
            <span class="hljs-attr">code</span>: <span class="hljs-number">20000</span>,
            <span class="hljs-attr">data</span>: &#123;
                <span class="hljs-comment">// 折线图</span>
                <span class="hljs-attr">lineData</span>: &#123;
                    <span class="hljs-attr">date</span>: [<span class="hljs-string">&#x27;2019-10-01&#x27;</span>, <span class="hljs-string">&#x27;2019-10-02&#x27;</span>, <span class="hljs-string">&#x27;2019-10-03&#x27;</span>, <span class="hljs-string">&#x27;2019-10-04&#x27;</span>, <span class="hljs-string">&#x27;2019-10-05&#x27;</span>, <span class="hljs-string">&#x27;2019-10-06&#x27;</span>, <span class="hljs-string">&#x27;2019-10-07&#x27;</span>],
                    <span class="hljs-attr">data</span>:List
                &#125;
            &#125;
        &#125;
    &#125;
&#125;</code></pre>

<h2 id="缺陷"><a href="#缺陷" class="headerlink" title="缺陷"></a>缺陷</h2><ol>
<li>对elmentUI不够熟悉</li>
<li>路由需要往进阶的学</li>
<li>mockjs的mock和random函数不熟</li>
<li>组件的封装还需学习</li>
</ol>

    </div>
     
    <div class="post-footer__meta"><p>更新于 2022-04-06</p></div> 
    <div class="post-entry__tags"><a href="/tags/vue2/" class="post-tags__link button"># vue2</a><a href="/tags/elementUI/" class="post-tags__link button"># elementUI</a></div> 
</article>


    <div class="nav">
        <div class="nav__prev">
            
                <a href="/2022/04/07/Spring%E7%AC%94%E8%AE%B0/" class="nav__link">
                    <div>
                        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M589.088 790.624L310.464 512l278.624-278.624 45.248 45.248L400.96 512l233.376 233.376z" fill="#808080"></path></svg>
                    </div>
                    <div>
                        <div class="nav__label">
                            <!-- Previous Post -->
                            上一页
                        </div>
                        <div class="nav__title">
                            Spring
                        </div>
                    </div>
                </a>
            
        </div>
        <div class="nav__next">
            
                <a href="/2022/03/18/webpack%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" class="nav__link">
                    <div>
                        <div class="nav__label">
                            <!-- Next Post -->
                            下一页
                        </div>
                        <div class="nav__title">
                            webpack的使用
                        </div>
                    </div>
                    <div>
                        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M434.944 790.624l-45.248-45.248L623.04 512l-233.376-233.376 45.248-45.248L713.568 512z" fill="#808080"></path></svg>
                    </div>
                </a>
            
        </div>
    </div>



    <div class="post__comments content-card" id="comment">
        
    <h4>评论</h4>
    
    
    
    <div id="valine_container" class="valine_thread"></div>

    
    
    
    
    
    
    
    


    </div>



</main>

            <footer class="footer" style="font-size: 10px;">
     
    <a href="#" class="button" id="b2t" aria-label="回到顶部" title="回到顶部">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="32" height="32">
            <path d="M233.376 722.752L278.624 768 512 534.624 745.376 768l45.248-45.248L512 444.128zM192 352h640V288H192z" fill="currentColor"></path>
        </svg>
    </a>

    


    
    
    
        <span id="busuanzi_container_site_uv" hidden>
            <span>游客:</span>
            <span id="busuanzi_value_site_uv"></span>
            <span></span>
            
                <span> </span>
            
        </span>
    
    
        <span id="busuanzi_container_site_pv" hidden>
            <span>次数:</span>
            <span id="busuanzi_value_site_pv"></span>
            <span></span>
            
        </span>
    
 
 

 
    
    
    <p>
        <!-- Powered by <a href="https://hexo.io" target="_blank">Hexo</a> | Theme - <a href="https://github.com/ChrAlpha/hexo-theme-cards" target="_blank">Cards</a> -->
        <span style="color: black;">作者：张程</span>
    </p>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        var a_idx = 0;
            jQuery(document).ready(function($) {
                $("body").click(function(e) {
                    var a = new Array("会当凌绝顶，一览众山小", "春蚕到死丝方尽，蜡炬成灰泪始干", "夕阳无限好，只是近黄昏",
                     "位卑未敢忘忧国", "纸上得来终觉浅，绝知此事要躬行", "人生自古谁无死，留取丹心照汗青", "山重水复疑无路，柳暗花明又一村" ,
                     "小荷才露尖尖角，早有蜻蜓立上头", "床前明月光，疑是地上霜", "春色满园关不住，一枝红杏出墙来", 
                     "山际见来烟，竹中窥落日", "道狭草木长，夕露沾我衣","天长地久有时尽，此恨绵绵无绝期");
                    var color = new Array("#7B7B7B", "#CE0000", "#FF0080","#E800E8","#921AFF","#2828FF",
                    "#0072E3","#00CACA","#02DF82","#00DB00","#8CEA00","#E1E100","#EAC100","#F75000"
                    ,"#B87070","#AFAF61","#6FB7B7","#9999CC","#B766AD");
                    var $i = $("<a href='#' style='text-decoration:none'/>").text(a[a_idx]);
                    a_idx = (a_idx + 1) % a.length;
                    var x = e.pageX,
                        y = e.pageY;
                    $i.css({
                        "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                        "top": y - 20,
                        "left": x,
                        "position": "absolute",
                        "font-weight": "bold",
                        "color": color[Math.floor(Math.random()*color.length)]
                    });
                    $("body").append($i);
                    $i.animate({
                            "top": y - 180,
                            "opacity": 0
                        },
                        1500,
                        function() {
                            $i.remove();
                        });
                });
            });
        </script>
    <script>
        !function() {
            function o(w, v, i) {
                return w.getAttribute(v) || i
            }
            function j(i) {
                return document.getElementsByTagName(i)
            }
            function l() {
                var i = j("script"),
                w = i.length,
                v = i[w - 1];
                return {
                    l: w,
                    z: o(v, "zIndex", -1),
                    o: o(v, "opacity", 0.5),
                    c: o(v, "color", "0,0,0"),
                    n: o(v, "count", 99)
                }
            }
            function k() {
                r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
                n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
            }
            function b() {
                e.clearRect(0, 0, r, n);
                var w = [f].concat(t);
                var x, v, A, B, z, y;
                t.forEach(function(i) {
                    i.x += i.xa,
                    i.y += i.ya,
                    i.xa *= i.x > r || i.x < 0 ? -1 : 1,
                    i.ya *= i.y > n || i.y < 0 ? -1 : 1,
                    e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);
                    for (v = 0; v < w.length; v++) {
                        x = w[v];
                        if (i !== x && null !== x.x && null !== x.y) {
                            B = i.x - x.x,
                            z = i.y - x.y,
                            y = B * B + z * z;
                            y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke())
                        }
                    }
                    w.splice(w.indexOf(i), 1)
                }),
                m(b)
            }
            var u = document.createElement("canvas"),
            s = l(),
            c = "c_n" + s.l,
            e = u.getContext("2d"),
            r,
            n,
            m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
            function(i) {
                window.setTimeout(i, 1000 / 45)
            },
            a = Math.random,
            f = {
                x: null,
                y: null,
                max: 20000
            };
            u.id = c;
            u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;
            j("body")[0].appendChild(u);
            k(),
            window.onresize = k;
            window.onmousemove = function(i) {
                i = i || window.event,
                f.x = i.clientX,
                f.y = i.clientY
            },
            window.onmouseout = function() {
                f.x = null,
                f.y = null
            };
            for (var t = [], p = 0; s.n > p; p++) {
                var h = a() * r,
                g = a() * n,
                q = 2 * a() - 1,
                d = 2 * a() - 1;
                t.push({
                    x: h,
                    y: g,
                    xa: q,
                    ya: d,
                    max: 6000
                })
            }
            setTimeout(function() {
                b()
            }, 100)
    } ();
    </script>
</footer>

        </div>
        
    <script defer src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.0/dist/lazyload.min.js"></script>
    <script>
        window.lazyLoadOptions = {
            elements_selector: ".lazy",
            threshold: 0
        };
    </script>
 

 

 

 

 



 



 


    
 


    
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>

    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.4.1/dist/jquery.fancybox.min.css">

    
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.4.1/dist/jquery.fancybox.min.js"></script>

    <script>
        let lazyloadT = Boolean('true'),
            auto_fancybox = Boolean('false')
        if (auto_fancybox) {
            $(".post__content").find('img').each(function () {
                var element = document.createElement("a");
                $(element).attr("data-fancybox", "gallery");
                $(element).attr("href", $(this).attr("src"));
                if (lazyloadT) {
                    $(element).attr("href", $(this).attr("data-srcset"));
                }
                $(this).wrap(element);
            });
        } else {
            $(".post__content").find("fancybox").find('img').each(function () {
                var element = document.createElement("a");
                $(element).attr("data-fancybox", "gallery");
                $(element).attr("href", $(this).attr("src"));
                if (lazyloadT) {
                    $(element).attr("href", $(this).attr("data-srcset"));
                }
                $(this).wrap(element);
            });
        }
    </script>
 

 

 

 

 


    

    
    
    
    <script>
        function loadComment() {
            let e;
            (e = document.createElement("script")).src = 'https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js',
            document.body.appendChild(e);
            e.onload = () => {
                var valineConfig = {"appId":"c21JqSBfScFdueO44Scwp9Ba-gzGzoHsz","appKey":"apETP0QIekHzRXjTHvOnrQmS","placeholder":null,"path":null,"avatar":"retro","meta":["nick","mail","link"],"pageSize":null,"lang":null,"visitor":null,"highlight":null,"avatarForce":null,"recordIP":null,"serverURLs":null,"enableQQ":true,"requiredFields":["nick","mail"],"emojiCDN":null,"emojiMaps":null};
                valineConfig.el = '#valine_container';
                for (var i in valineConfig) {
                    if (valineConfig[i] === null) delete valineConfig[i];
                }
                new Valine(valineConfig);
            };
        }
    
        var runningOnBrowser = typeof window !== "undefined";
        var isBot = runningOnBrowser && !("onscroll" in window) || typeof navigator !== "undefined" && /(gle|ing|ro|msn)bot|crawl|spider|yand|duckgo/i.test(navigator.userAgent);
        var supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;
    
        setTimeout(function () {
            if (!isBot && supportsIntersectionObserver) {
                var comment_observer = new IntersectionObserver(function(entries) {
                    if (entries[0].isIntersecting) {
                        loadComment();
                        comment_observer.disconnect();
                    }
                }, { threshold: [0] });
                comment_observer.observe(document.getElementById('comment'));
            } else {
                loadComment();
            }
        }, 1);
    </script>


    
    
    
    
    

    
    
    
    
    

    
    
    



    </body>
</html>
